<template>
  <div
    class="login-container"
    style="display: flex; flex-direction: column; height: 100vh"
  >
    <div class="container-head flex" style="background:#09D0CE">
      <div style="-webkit-app-region: drag;color:#FFFFFF">账号登陆</div>
      <div style="flex: 1; height: 46px; -webkit-app-region: drag"></div>
      <div class="head-right flex">
        <div class="user-info flex">
          <div class="window-min cursor" @click="winMin"></div>
          <div class="window-close cursor" @click="winClose"></div>
        </div>
      </div>
    </div>
    <div class="login-content-box flex">
      <div class="login-icon"></div>
      <div class="form-item flex">
        <img src="~@/assets/email-icon.png" alt="">
        <input
          placeholder="请输入邮箱"
          v-model="formData.email"
        />
      </div>
      <div class="form-item flex">
        <img src="~@/assets/pwd.png" alt="">
        <input
          :type="showPwd?'text':'password'"
          placeholder="请输入密码"
          v-model="formData.passwd"
        />
        <img v-if="showPwd" src="~@/assets/eye-close.png" alt="" @click="changePwd(false)">
        <img v-else src="~@/assets/eye.png" alt="" @click="changePwd(true)">
      </div>
      <div class="jump-btns flex">
        <div class="register-btn cursor" @click="goRegister">注册账户</div>
        <div class="online-people cursor" @click="openOnline">在线客服</div>
      </div>
      <el-button class="form-item flex login-btn cursor" @click="login" :loading="!loading">登 录</el-button>
    </div>
  </div>
</template>

<script>
import {userLogin} from '../utils/api'
const { remote } = require('electron')
const BrowserWindow = require("electron").remote.BrowserWindow;
export default {
  name: "login",
  data() {
    return {
      loading:false,
      showPwd:false,
      formData:{
        passwd:'',
        email:''
      },
      isOpenWin: false
    };
  },
  mounted(){
    remote.getCurrentWindow().setSize(500, 560)
    this.loading = true;
    this.formData.email = this.$localStore.get("email")
    this.formData.passwd = this.$localStore.get("passwd")
  },
  methods: {
    changePwd(type){
      this.showPwd = type
    },
    winMin() {
      this.$electron.ipcRenderer.send("window-min");
    },
    winClose() {
      this.$electron.ipcRenderer.send("window-close");
    },
    validateEmail(){
      let checkmail =/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      return checkmail.test(this.formData.email)
    },
    goRegister(){
      this.$router.push({
        path:'/register'
      })
    },
    login(){
      const data = this.formData
      if(this.formData.email.length == 0){
        this.$message.error("邮箱不能为空")
        return;
      }
      if(!this.validateEmail()){
        this.$message.error('请输入正确的邮箱')
        return
      }
      if(this.formData.passwd.length == 0){
        this.$message.error("密码不能为空")
        return;
      }
      this.loading = true
      userLogin(data).then(res => {
        this.loading = false
        if(res.data && res.data.ret == 1){
          this.$localStore.set("access_token",res.data.data.token)
          this.$localStore.set("userInfo",res.data.data.user)
          // 保存账号密码
          this.$localStore.set("email",this.formData.email)
          this.$localStore.set("passwd",this.formData.passwd)
          this.$router.push({
            path:'/home'
          })
        }else{
          this.$message.error(res.data.msg)
          this.loading = true
        }
      }).catch(()=>{
        this.loading = false
      })
    },
    openOnline(){
      let onlineUrl = this.$localStore.get("onlineUrl")
      if(onlineUrl == null){
        return false;
      }
      let onlineWin = new BrowserWindow(
          {
            width: 420,
            height: 680,
            show: false,
            resizable: false,
            minimizable: false,
            webPreferences: {
              nodeIntegration: true
            }
          });
      onlineWin.on("closed", function() {
        onlineWin = null;
      });
      onlineWin.setTitle("在线客服")
      onlineWin.loadURL(onlineUrl);
      onlineWin.once('ready-to-show', () => {
        onlineWin.show()
      })
    },
  },
};
</script>

<style>
.login-content-box{
  width: 360px;
  margin:0 auto;
  margin-top: 50px;
  flex-direction: column !important;
}
.login-icon{
  width: 109px;
  height: 103px;
  margin-bottom: 49px;
  background: url('../assets/login-icon.png') left top no-repeat;
  background-size: 100%;
}
</style>